<template>
  <div class="body">
    <div class="table_content">

      <div class="table_filtrate">
        <div class="tf_item">
          <div class="tag">商务</div>
          <el-select
            v-model="tableParams.business_uid"
            class="input"
            placeholder="请选择"
            size="mini"
          >
            <el-option label="全部" :value="0" />
            <el-option
              v-for="item in tableFiltrateData.business_list"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            >
              <span style="float: left">{{ item.nickname }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.group_name
              }}</span></el-option>
          </el-select>
        </div>
        <div class="tf_item">
          <div class="tag">助贷类型</div>
          <el-select
            v-model="tableParams.loantype"
            class="input"
            placeholder="请选择"
            size="mini"
          >
            <el-option label="全部" value="all" />
            <el-option label="全国" value="nationwide" />
            <el-option label="区域" value="region" />
            <el-option label="同业" value="peer" />
          </el-select>
        </div>
        <div class="tf_item">
          <div class="tag">搜索</div>
          <el-input
            v-model="tableParams.fuzzy_search"
            class="input_fuzzy_search input"
            placeholder="模糊搜索 ID|名字"
            clearable
            size="mini"
          />
        </div>
        <div class="tf_item">
          <div class="tag">状态</div>
          <el-select
            v-model="tableParams.status"
            class="input"
            placeholder="请选择"
            size="mini"
          >
            <el-option label="全部" value="all" />
            <el-option label="通过" value="normal" />
            <el-option label="驳回" value="failure" />
            <el-option label="待审核" value="await" />
            <el-option label="废弃" value="stop" />
          </el-select>
        </div>
        <div class="tf_item">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="loadTableData"
          >搜索</el-button>
        </div>
      </div>

      <div class="table-card">
        <el-table
          v-loading="table_loading"
          class="table"
          :data="tableData.data"
          size="mini"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="机构名字" width="180" />

          <el-table-column label="所属商务" width="120">
            <template slot-scope="scope">
              <div>{{ scope.row.business.nickname }}</div>
            </template>
          </el-table-column>

          <el-table-column label="营业执照" width="90">
            <template slot-scope="scope">
              <el-image
                v-for="img in scope.row.business_license_img"
                :key="img"
                class="column table_td_img"
                :src="img"
                fit="cover"
                @click="goToUrl(img)"
              />
            </template>
          </el-table-column>

          <el-table-column label="法人身份证" width="100">
            <template slot-scope="scope">
              <el-image
               style="margin-right: 5px"
                v-for="img in scope.row.corporate_card_img"
                :key="img"
                class="column table_td_img"
                :src="img"
                fit="cover"
                @click="goToUrl(img)"
              />
            </template>
          </el-table-column>

          <el-table-column label="办公地点视频" width="120">
            <template slot-scope="scope">
              <el-link
                v-for="(img, index) in scope.row.office_video"
                :key="img"
                :href="img"
                target="_blank"
              ><i class="el-icon-view el-icon--right" /> 视频{{
                index + 1
              }}</el-link>
            </template>
          </el-table-column>

          <el-table-column label="合作协议" width="90">
            <template slot-scope="scope">
              <el-image
                v-for="img in scope.row.cooperation_agreement_img"
                :key="img"
                class="column table_td_img"
                :src="img"
                fit="cover"
              />
            </template>
          </el-table-column>

          <el-table-column label="承诺函" width="90">
            <template slot-scope="scope">
              <el-image
                v-for="img in scope.row.commitment_letter_img"
                :key="img"
                class="column table_td_img"
                :src="img"
                fit="cover"
              />
            </template>
          </el-table-column>

          <el-table-column label="状态" width="90">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.status == 'normal'"
                type="success"
                plain
                size="mini"
              >通过</el-tag>
              <el-tag
                v-else-if="scope.row.status == 'failure'"
                type="info"
                plain
                size="mini"
              >驳回</el-tag>
              <el-tag
                v-else-if="scope.row.status == 'await'"
                type="warning"
                plain
                size="mini"
              >待审核</el-tag>
              <el-tag
                v-else-if="scope.row.status == 'stop'"
                type="danger"
                plain
                size="mini"
              >已废弃</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="remark" label="备注" width="90" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span
                slot="reference"
                class="ellipsis custom-link"
                style="font-size: 12px"
              >{{ scope.row.remark }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleCheckDialogVisible(scope.row)"
              >
                {{ scope.row.status == "await" ? "审核" : "重新审核" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="table_pagination"
          :current-page="currentPage4"
          :page-sizes="$pageSize"
          :page-size="tableParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
        />
      </div>
    </div>

    <el-dialog title="审核批复" :visible.sync="dialog.visible">
      <el-form ref="refForm" :model="dialog.form">
        <el-form-item
          label="审核状态"
          prop="status"
          :rules="[{ required: true, message: '审核状态不能为空' }]"
        >
          <el-radio-group v-model="dialog.form.status">
            <el-radio label="normal">通过</el-radio>
            <el-radio label="failure">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark"
          :rules="[{ required: true, message: '备注不能为空' }]"
        >
          <el-input
            v-model="dialog.form.remark"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 16 }"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit_check">确认</el-button>
          <el-button @click="dialog.visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiOrganizationListpage,
  apiOrganizationReply
} from '@/api/apiOrganization'
import {
  apiAgentList,
  apiGroupList,
  apiAgentCreate,
  apiAgentUpdate
} from '@/api/apiCommon'
import { getUploadingUrl } from '@/api/uploading'
import { getToken } from '@/utils/auth'
// import { arrayToString, stringToArray } from "@/utils/arrayUtil";
import { getImgUrl, imgstrTransitionArray } from '@/api/uploading'
import { getCity, trCity, authJudgment } from '@/utils/appUtil'

export default {
  name: 'Index',
  data() {
    return {
      tableParams: {
        page: 1,
        size: 15,
        status: 'all',
        fuzzy_search: '',
        business_uid: 0,
        loantype: 'all',
        status_sort: 1
      },
      tableData: {
        current_page: 1,
        data: [],
        last_page: 1,
        per_page: '15',
        total: 0
      },
      tableFiltrateData: {
        business_list: []
      },
      currentPage4: 1,
      dialog: {
        title: '',
        form: {
          id: 0,
          status: null,
          remark: ''
        },
        visible: false
      },
      table_loading: false,
      fromViewCofing: {
        input_width: '120px',
        label_width: '120px'
      },
      init_form: {}
    }
  },
  created() {
    this.init_form = this.form
    if (authJudgment('manage')) {
      this.req_agent()
    }
    this.loadTableData()
  },
  methods: {
    goToUrl(url) {
      window.open(url, '_blank')
    },
    // 获取商务人员
    req_agent() {
      const _this = this
      apiAgentList({
        page: 1,
        size: 99,
        status: 'normal',
        group_id: '2,3,5'
      })
        .then((response) => {
          const result = response.data.datalist.data
          _this.tableFiltrateData.business_list = result
        })
        .catch(function(result) {
          _this.$message.error(result.msg)
        })
    },
    // 列表请求
    loadTableData() {
      const _this = this
      _this.table_loading = true
      var tableParams = { ...this.tableParams }

      if (tableParams.fuzzy_search == '') {
        delete tableParams.fuzzy_search
      }
      if (tableParams.business_uid == 0) {
        delete tableParams.business_uid
      }
      if (tableParams.loantype == 'all') {
        delete tableParams.loantype
      }
      apiOrganizationListpage(tableParams)
        .then((response) => {
          const result = response
          var tableData = result.data.datalist
          var data = tableData.data
          var imgArray = []
          for (var i = 0; i < data.length; i++) {
            data[i]['push_status_switch'] = false
            data[i]['entry_status_switch'] = false
            if (data[i]['push_status'] == 1) {
              data[i]['push_status_switch'] = true
            }
            if (data[i]['entry_status'] == 1) {
              data[i]['entry_status_switch'] = true
            }
            if (data[i]['entry_status'] == 1) {
              data[i]['entry_status_switch'] = true
            }
            if (data[i]['loantype'] == 'nationwide') {
              data[i]['loantype_text'] = '全国'
            } else if (data[i]['loantype'] == 'region') {
              data[i]['loantype_text'] = '区域'
            } else if (data[i]['loantype'] == 'peer') {
              data[i]['loantype_text'] = '同业'
            }
            data[i]['business_license_img'] = imgstrTransitionArray(
              data[i]['business_license_img']
            )
            data[i]['corporate_card_img'] = imgstrTransitionArray(
              data[i]['corporate_card_img']
            )
            data[i]['cooperation_agreement_img'] = imgstrTransitionArray(
              data[i]['cooperation_agreement_img']
            )
            data[i]['commitment_letter_img'] = imgstrTransitionArray(
              data[i]['commitment_letter_img']
            )
            data[i]['office_video'] = imgstrTransitionArray(
              data[i]['office_video']
            )
          }
          console.log(data, 'data')
          tableData.data = data
          _this.tableData = tableData
          _this.table_loading = false
        })
        .catch(function(result) {
          console.error(result)
          _this.$message.error(result.msg)
          _this.table_loading = false
          _this.tableData.data = null
        })
    },
    // 初始化表单数据
    from_init() {
      this.form = {
        id: 0,
        name: '',
        logo_img: '',
        password_confirmation: '',
        mobile: '',
        nickname: '',
        group_id: '',
        status: 'normal'
      }
    },
    // 提交审核状态
    onSubmit_check() {
      const _this = this
      this.$confirm('是否提交', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          _this.$refs['refForm'].validate((valid) => {
            if (valid) {
              var form = this.dialog.form

              if (form.status != 'normal' && form.status != 'failure') {
                this.$message({
                  type: 'info',
                  message: '请选择审核状态'
                })
                return false
              }

              apiOrganizationReply(form).then((response) => {
                _this.dialog.visible = false
                _this.$message.success(response.msg)
                _this.loadTableData()
              })
            } else {
              return false
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 打开审核窗口
    handleCheckDialogVisible(val) {
      this.dialog.visible = true
      var form = this.dialog.form
      form.id = val['id']
      form.status = val['status']
      form.remark = val['remark']

      console.log(form, 'formformformformformformformformformformform')
      this.dialog.form = form
    },
    // 表格操作
    handleTableEdit(index, row) {
      console.log(row, 'rowrowrowrow')
      this.$router.push({
        path: '/organization/update',
        query: { id: row.id }
      })
      // this.$router.push(`/organization/create`)
    },
    // 表格删除
    handleTableDelete(index, row) {
      console.log(index, row)
    },
    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val
      this.loadTableData()
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val
      this.loadTableData()
      // console.log(`当前页: ${val}`);
    },
    // 打开备注
    handleOpenRemark(text) {
      this.$alert(text, '备注', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
}
</script>

<style lang="scss">
// .body {
//     padding: 5px;
//     background-color: #F5F5F5;

//     .table_content {
//         padding: 30px;
//         background-color: #fff;

//     }

//     .table_operate {
//         background-color: #fff;

//         .btn_add {
//             margin-top: 12px;
//             margin-bottom: 12px;
//             margin-left: 12px;
//         }
//     }

//     .table_filtrate {
//         margin-bottom: 20px;
//         background-color: #fff;
//         padding: 20px;
//         border-radius: 12px;
//         display: flex;
//         flex-wrap: wrap;
//         margin-bottom: 10px;

//         .tf_item {
//             display: flex;
//             align-items: center;
//             margin-bottom: 10px;

//             .tag {
//                 font-size: 12px;
//                 color: #424242;
//                 padding-right: 10px;
//                 text-align: right;
//             }

//             .input {
//                 flex: 1;
//                 padding-right: 10px;
//                 width: 180px;
//             }
//         }

//         .input_fuzzy_search {
//             width: 230px;
//             margin-right: 10px;
//         }
//     }

//     .table_pagination {

//         margin-top: 30px;
//     }

//     .table {
//         padding: 0px;
//         width: 100%;
//         border-radius: 5px;

//     }

//     .form {
//         width: 95%;

//         .inp {
//             width: 230px;
//             ;
//         }
//     }

//     .el-table__fixed-right {
//         .el-table__fixed-body-wrapper {
//             top: 44px !important;
//         }
//     }

// }
</style>
